{literal}{if ({/literal}{$show|default:true}{literal})}{/literal}

    <!-- Bootstrap Image Gallery styles -->
    <link rel="stylesheet" href="http://blueimp.github.com/Bootstrap-Image-Gallery/css/bootstrap-image-gallery.min.css">
    
    <!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
    <link rel="stylesheet" href="assets/js/libs/jquery-file-upload/css/jquery.fileupload-ui.css">
    
    {literal}
    <style>
        .files .progress { width: 100%; }
    </style>
    {/literal}

    <div class="{$galleryclass|default:'upload'} {$cssclass|default:'span12'}">

        <form id="fileupload" action="archivos/upload/" method="POST" enctype="multipart/form-data">
            <!-- Redirect browsers with JavaScript disabled to the origin page -->
            <noscript><input type="hidden" name="redirect" value="http://blueimp.github.com/jQuery-File-Upload/"></noscript>
            
            <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
            <div class="row fileupload-buttonbar">
                <div class="span7">
                    <!-- The fileinput-button span is used to style the file input field as button -->
                    <span class="btn btn-primary fileinput-button">
                        <i class="icon-plus icon-white"></i>
                        <span>Agregar archivos...</span>
                        <input type="file" name="files[]" multiple>
                    </span>
                </div>

                <!-- The global progress information -->
                <div class="span5 fileupload-progress fade">
                    <!-- The global progress bar -->
                    <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                        <div class="bar" style="width:0%;"></div>
                    </div>
                    <!-- The extended global progress information -->
                    <div class="progress-extended">&nbsp;</div>
                </div>
            </div>
            <!-- The loading indicator is shown during file processing -->
            <div class="fileupload-loading"></div>

            <div class="alert alert-info">
                <strong>También funciona arrastrando archivos! </strong> Aparte del clásico botón subir, podrás arrastrar aquí archivos desde cualquier otra ventana de tu computadora.
            </div>
            

            <!-- The table listing the files available for upload/download -->
            <ul role="presentation" class="thumbnails files">
            </ul>
            
        </form><!-- upload -->
            
    </div>

    {literal}
    {literal}{literal{/literal}{literal}}{/literal}
    <!-- The template to display files available for upload -->
    <script id="template-upload" type="text/x-tmpl">
    {% for (var i=0, file; file=o.files[i]; i++) { %}
        <li class="span2 template-upload fade">
            <div class="thumbnail">
                <p class="preview"><span class="fade"></span></p>
                <p class="name"><span>{%=file.name%}</span></p>
                <p class="size"><span>{%=o.formatFileSize(file.size)%}</span></p>
                    
                {% if (file.error) { %}
                    <div class="error"><span class="label label-important">Error</span> {%=file.error%}</div>
                {% } else if (o.files.valid && !i) { %}
                    <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>
                {% } %}
                <div class="cancel">
                    {% if (!i) { %}
                    <button class="btn btn-warning">
                        <i class="icon-ban-circle icon-white"></i>
                        <span>Cancelar</span>
                    </button>
                    {% } %}
                </div>                            
            </div>      
        </li>            
    {% } %}
    </script>

    <!-- The template to display files available for download -->
    <script id="template-download" type="text/x-tmpl">
        {% for (var i=0, file; file=o.files[i]; i++) { %}
            <li class="file-{%=file.id%} alert alert-success">
                {%
                 jQuery.get("archivos/update/"+file.id+"/", function(data) {
                 var id = this.url.split("/")[2];
                    jQuery(".file-"+id).html(data);
                });
                %}
            </li>
        {% } %}
    </script>
    {literal}{/literal{/literal}{literal}}{/literal}
    {/literal}

    <!-- The Templates plugin is included to render the upload/download listings -->
    <script src="http://blueimp.github.com/JavaScript-Templates/tmpl.min.js"></script>
    <!-- The Load Image plugin is included for the preview images and image resizing functionality -->
    <script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script>
    <!-- The Canvas to Blob plugin is included for image resizing functionality -->
    <script src="http://blueimp.github.com/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js"></script>

    <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
    <script src="assets/js/libs/jquery-file-upload/js/jquery.iframe-transport.js"></script>
    <!-- The basic File Upload plugin -->
    <script src="assets/js/libs/jquery-file-upload/js/jquery.fileupload.js"></script>
    <!-- The File Upload file processing plugin -->
    <script src="assets/js/libs/jquery-file-upload/js/jquery.fileupload-fp.js"></script>
    <!-- The File Upload user interface plugin -->
    <script src="assets/js/libs/jquery-file-upload/js/jquery.fileupload-ui.js"></script>
    <!-- The main application script -->
    <script src="assets/js/libs/jquery-file-upload/js/main.js"></script>
    <!-- The XDomainRequest Transport is included for cross-domain file deletion for IE8+ -->
    <!--[if gte IE 8]><script src="assets/js/libs/jquery-file-upload/js/cors/jquery.xdr-transport.js"></script><![endif]-->


    <!-- Edit Model's Modal -->
    <div class="modal hide fade" id="archivos_update" tabindex="-1" role="dialog">
      <div class="modal-body reset-modal-body"></div>
    </div>

    <script>
      // Will Force to reload contents
      $('body').on('hidden', '.modal', function () {
        $(this).removeData('modal');
      });
    </script>
        
{literal}{/if}{/literal}
